<!--
 * @FilePath: /my-map-demo/src/views/Home.vue
 * @Author: 张文鑫
 * @Date: 2024-11-30 22:33:54
 * @Description: 
-->
<template>
  <div class="home-container">
    <el-row :gutter="20" class="welcome-section">
      <el-col :span="24">
        <el-card class="welcome-card">
          <h1>欢迎来到 GIS 空间分析平台</h1>
          <p>这是一个基于 OpenLayers 的地理信息系统，提供多种空间分析功能</p>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-section">
      <el-col :span="8">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>功能使用统计</span>
            </div>
          </template>
          <div class="chart-container" ref="pieChartRef"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>近期分析趋势</span>
            </div>
          </template>
          <div class="chart-container" ref="lineChartRef"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>区域分布</span>
            </div>
          </template>
          <div class="chart-container" ref="barChartRef"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-section">
      <el-col :span="6" v-for="feature in features" :key="feature.title">
        <el-card class="feature-card" :body-style="{ padding: '0px' }">
          <div class="feature-icon">
            <el-icon :size="40"><component :is="feature.icon" /></el-icon>
          </div>
          <div class="feature-content">
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { Location, DataLine, MapLocation, Connection } from "@element-plus/icons-vue";

const pieChartRef = ref(null);
const lineChartRef = ref(null);
const barChartRef = ref(null);

const features = [
  {
    icon: "Location",
    title: "缓冲区分析",
    description: "分析指定范围内的空间要素分布",
  },
  {
    icon: "DataLine",
    title: "叠加分析",
    description: "多图层叠加分析空间关系",
  },
  {
    icon: "MapLocation",
    title: "邻近度分析",
    description: "计算空间要素之间的邻近关系",
  },
  {
    icon: "Connection",
    title: "网络分析",
    description: "基于路网的最短路径分析",
  },
];

onMounted(() => {
  // 初始化饼图
  const pieChart = echarts.init(pieChartRef.value);
  pieChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "功能使用",
        type: "pie",
        radius: "50%",
        data: [
          { value: 235, name: "缓冲区分析" },
          { value: 274, name: "叠加分析" },
          { value: 310, name: "邻近度分析" },
          { value: 335, name: "网络分析" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 初始化折线图
  const lineChart = echarts.init(lineChartRef.value);
  lineChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        smooth: true,
      },
    ],
  });

  // 初始化柱状图
  const barChart = echarts.init(barChartRef.value);
  barChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["西湖", "滨江", "钱江", "武林"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  });

  // 添加窗口大小改变时的自适应
  window.addEventListener("resize", () => {
    pieChart.resize();
    lineChart.resize();
    barChart.resize();
  });
});
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.welcome-section {
  margin-bottom: 20px;
}

.welcome-card {
  text-align: center;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: white;
}

.welcome-card h1 {
  margin: 0;
  font-size: 28px;
  padding: 20px 0;
}

.welcome-card p {
  margin: 0;
  font-size: 16px;
  padding-bottom: 20px;
  opacity: 0.9;
}

.stats-section {
  margin-bottom: 20px;
}

.stats-card {
  height: 350px;
}

.chart-container {
  height: 280px;
}

.feature-section {
  margin-top: 20px;
}

.feature-card {
  height: 200px;
  text-align: center;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  padding: 20px 0;
  color: #409eff;
}

.feature-content {
  padding: 20px;
}

.feature-content h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.feature-content p {
  margin: 10px 0 0;
  font-size: 14px;
  color: #606266;
}

.card-header {
  font-weight: bold;
  color: #303133;
}
</style>
